<template>
	<view class="cardview bgwhite service-item" v-if="Object.keys(item).length > 0">
		<view class="ser-img">
			<image mode="scaleToFill" :src='item.imgUrl' :alt="item.title" style="width: 100%;"/>
		</view>
		<view class="pd">
			<view class="mgb">
				<view class="fl-rsb">
				<view class="stit mgb10">{{title}}</view>
				<!-- 收藏按钮 -->
				<view class="mark-area">
					<uni-icons :type="isMark ? 'star' : 'star-filled'" size="30" color="#FFC300"></uni-icons>
				</view>
				</view>
				<view class="stext">{{item.title}}</view>
			</view>
			<view class="mgb">
				<view class="stit mgb10">地址：</view>
				<view class="stext">{{item.subTitle}}</view>
			</view>
			<view class="mgb">
				<view class="stit mgb10">介绍：</view>
				<view class="stext">{{item.desc}}</view>
			</view>
		</view>
		<view class="float-area fl-cc">
			<view class="" style="width: 90%;">
				<view class="btn btn-primary fl" plain @click="openExternalMapApp">
						<view class="pdr10"><uni-icons type="paperplane" size="16" color="#FFFFFF"></uni-icons></view>
						<text>导航</text>
				</view>
			</view>
		</view>
	</view>
	<view v-else>
		暂无内容
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue';
	const templateList = {
		"attrations" : {
			title: '景区名称：',
			subTitle: '地址',
			desc: '介绍：',
		},
		"catering" : {
			title: '餐厅名称：',
			subTitle: '地址',
			desc: '介绍：',
		}
	};
	const props = defineProps({
		title:{
			type: String,
			defult: ''
		},
		type:{
			type: String,
			defult: ''
		},
		item: {
			type: Object,
			default: () => {
				return {
					imgUrl: '',
					title: '',
					isMark: true,
					subTitle: '',
					desc: '',
					distance: ''
				}
			}
		}
	});
	const emit = defineEmits(['goDetail', 'signExam', 'help']);
	const goDetail = (item) => {
		const eid = parseInt(props.loginType) == 1 ? item.eid : item.pid
		emit('goDetail', eid);
	}
	const help = (kdCode) => {
		emit('help', kdCode);
	}
	const signExam = (kdCode) => {
		emit('signExam', kdCode);
	}
	const isNull = (val) =>{
		return val === undefined || val === '' || val === null ? '' : val
	}
	const openLocation = (item) => {
		// 调用【跨端】地图API打开定位
		uni.openLocation({
			latitude: Number(item.kdy),
			longitude: Number(item.kdx),
			scale: 18, // 缩放级别，取值范围为5~18  
			name: item.kdName + item.floorName, // 可选，位置名称  
			address: item.kdAddress + '- 考点编号：' + item.kdCode // 可选，位置详细描述  
		});
	}
	// 考楼图预览
	const viewFloorPlan = (item) => {
		if (item.floorPic) {
			uni.previewImage({
				current: item.floorPic, // 当前显示图片的链接
				urls: [item.floorPic], // 需要预览的图片链接列表
				indicator: 'number',
				loop: true
			});
		} else {
			uni.showToast({
				title: '考楼图暂未上传',
				icon: 'none'
			});
		}
	}
	// 打开外部地图应用
	function openExternalMapApp(mapType, destination) {
		// 生成导航链接
		const origin = {
			latitude: userLocation.value.latitude,
			longitude: userLocation.value.longitude
		};
		console.log('导航：>', origin, '-----' + destination);
		const name = item.name;
		const address = item.address;
		let url = "";
		switch (mapType) {
			case "gaode":
				url =
					`amapuri://route/plan/?slat=${origin.latitude}&slon=${origin.longitude}&sname=当前位置&dlat=${destination.latitude}&dlon=${destination.longitude}&dname=${encodeURIComponent(name)}&dev=0&t=0`;
				break;
			case "baidu":
				url =
					`baidumap://map/direction?origin=${origin.latitude},${origin.longitude}&destination=${destination.latitude},${destination.longitude}&destination=${encodeURIComponent(name)}&coord_type=wgs84&mode=driving`;
				break;
			case "tencent":
				url =
					`qqmap://map/routeplan?type=drive&fromcoord=${origin.latitude},${origin.longitude}&to=${encodeURIComponent(name)}&tocoord=${destination.latitude},${destination.longitude}`;
				break;
			default:
				uni.showToast({
					title: "不支持的地图类型",
					icon: "none"
				});
				return;
		}
		uni.openURL({
			url,
			success() {
				console.log("成功调起地图应用");
			},
			fail(err) {
				uni.showToast({
					title: `调起失败: ${err.errMsg}`,
					icon: "none"
				});
			}
		});
	};
</script>

<style lang="scss" scoped>
	.service-item {

		.title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.ser-img {
			min-height: 180px;
			position: relative;
		}
	}
	.mark-area{
	}
</style>